<template>
  <view class="recordInfo_container">
    <view class="info">
      <view class="info_content">
        <text>发票抬头：</text>
        <text>{{ data.receiptTitle }}</text>
      </view>
      <view class="info_content">
        <text>税&emsp;&emsp;号：</text>
        <text>{{ data.taxpayerNo }}</text>
      </view>
      <view class="info_content">
        <text>发票金额：</text>
        <text>￥{{ data.receiptPrice }}</text>
      </view>
      <view class="info_content">
        <text>申请时间：</text>
        <text>{{ data.createTime }}</text>
      </view>
      <view class="info_content">
        <text>开票状态：</text>
        <text style="color: #ef231b">{{ type(data.receiptStatus) }} </text>
      </view>

      <view class="img" @click="previewImage">
        <img :src="staticUrl() + '/setting/invoiceImg.png'" />
        <text>点击预览发票</text>
      </view>
    </view>

    <view class="tips" v-if="data.reviewComment">
      <img :src="staticUrl() + '/setting/warning.png'" />
      <text>{{ data.reviewComment }}</text>
    </view>

    <view class="list">
      <view v-for="(item, index) in data.orders" :key="index" class="item">
        <view class="itemInfo">
          <text>订单编号：{{ item.sn }}</text>
          <text>订单金额：￥{{ item.flowPrice }}</text>
        </view>
      </view>
    </view>

    <view class="bottom" v-if="data.receiptStatus === 'INVOICED'">
      <button @click="dialog = true">申请冲红</button>
    </view>

    <Dialog :dialog="dialog" :title="title" :content="content" @confirm="dialogConfirm"
      @cancel="dialogCancel">
    </Dialog>

    <view class="multipleInvoices_box" v-if="multipleInvoices"
      @click.stop="multipleInvoices = false">
      <view class="multipleInvoices_body">
        <view class="multipleInvoices_body_title">
          <text>选择发票</text>
          <img :src="staticUrl() + '/home/close.png'" @click.stop="multipleInvoices = false" />
        </view>
        <view class="multipleInvoices_body_item" v-for="(i, j) in data.invoices" :key="j"
          @click.stop="invoicesMore(i)">
          <view>
            <text class="invoiceNo">发票号：{{ i.invoiceNo }}</text>
            <view class="other">
              <text>发票金额：￥{{ i.price }}</text>
              <text>开票日期：{{ i.date }}</text>
            </view>
          </view>
          <img :src="staticUrl() + '/personalCenter/right.png'" class="right" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getInvoiceDetails, applicationFlushRed } from '@/api/invoice'
import Dialog from '@/components/dialog'

export default {
  components: { Dialog },
  data () {
    return {
      id: '',
      data: '',
      dialog: false,
      title: '温馨提示',
      content: '申请冲红发票将会作废，确认申请冲红吗？',
      multipleInvoices: false
    }
  },
  onLoad (e) {
    this.id = e.id
    this.getData()
  },
  methods: {
    dialogCancel () {
      this.dialog = false
    },
    dialogConfirm () {
      applicationFlushRed(this.id)
        .then(res => {
          if (res.code === 200) {
            uni.showToast({ icon: 'none', title: '申请冲红成功', mask: true })
          }
        })
        .catch(() => {
          uni.showToast({ icon: 'none', title: '冲红申请失败', mask: true })
        })
        .finally(() => {
          setTimeout(() => {
            uni.reLaunch({ url: `/subpackage/invoice/recordInfo?id=${this.id}` })
          }, 500)
        })
    },
    invoicesMore (val) {
      if (this.data.receiptStatus === 'INVOICED' || this.data.receiptStatus === 'REISSUING') {
        uni.navigateTo({
          url: `/subpackage/invoice/previewImage?url=${val.url}&invoiceId=${val.id}&sn=${this.data.sn}`
        })
      } else {
        uni.showToast({ icon: 'none', title: '当前状态不可预览', mask: true })
      }
    },
    previewImage () {
      // REISSUING, INVOICED
      if (this.data.receiptStatus === 'INVOICED' || this.data.receiptStatus === 'REISSUING') {
        if (this.data.invoices.length === 1) {
          uni.navigateTo({
            url: `/subpackage/invoice/previewImage?url=${this.data.invoices[0].url}&invoiceId=${this.data.invoices[0].id}&sn=${this.data.sn}`
          })
        } else if (this.data.invoices.length > 1) {
          this.multipleInvoices = true
        } else {
          uni.showToast({ icon: 'none', title: '当前状态不可预览', mask: true })
        }
      } else {
        uni.showToast({ icon: 'none', title: '当前状态不可预览', mask: true })
      }
    },
    getData () {
      getInvoiceDetails(this.id).then(res => {
        if (res.code === 200) {
          this.data = res.data
          this.data.invoices.forEach(i => {
            let d = new Date(i.invoicingDate)
            this.$set(i, 'date', `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`)
          })
        }
      })
    },
    type (e) {
      let a = {
        NEW: '审核中',
        INVOICING: '开票中',
        INVOICED: '已开票',
        REISSUING: '冲红中',
        REFUSE: '拒绝',
        INVALID: '作废',
        REISSUE: '冲红'
      }
      return a[e]
    }
  }
}
</script>

<style lang="scss" scoped>
.recordInfo_container {
  min-height: 100vh;
  background: #f9f9f9;
  overflow: hidden;

  .info {
    background: #fff;
    margin-top: 20.83rpx;
    overflow: hidden;
    position: relative;

    .info_content {
      line-height: 1;
      margin-bottom: 44.44rpx;
      margin-left: 28.47rpx;
      font-size: 28rpx;
      display: flex;

      text:nth-child(1) {
        color: #8d8d8d;
      }

      text:nth-child(2) {
        // display: inline-block;
        width: 46%;
        color: #585858;
        word-wrap: break-word;
      }
    }

    .info_content:nth-child(1) {
      margin-top: 39.58rpx;
    }

    .img {
      position: absolute;
      top: 39.58rpx;
      right: 28.47rpx;
      font-size: 25rpx;
      text-align: center;
      color: #8d8d8d;

      img {
        display: block;
        width: 194.44rpx;
        height: 119.44rpx;
      }

      text {
        line-height: 2;
      }
    }
  }

  .tips {
    width: 750rpx;
    background: #ffffff;
    border-top: 1px solid #f9f9f9;
    display: flex;
    font-size: 25rpx;
    font-weight: 400;
    color: #8d8d8d;
    padding: 20.83rpx 0;

    img {
      display: block;
      width: 25rpx;
      height: 25rpx;
      margin-left: 33.33rpx;
      margin-right: 13.19rpx;
    }

    text {
      display: inline-block;
      line-height: 1;
      width: 60%;
      max-height: 50rpx;
      overflow: hidden;
    }
  }

  .list {
    .item {
      height: 153rpx;
      background: #ffffff;
      margin-top: 20.83rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 29.17rpx;

      .itemInfo {
        display: flex;
        flex-flow: column nowrap;

        text {
          line-height: 1;
        }

        text:nth-child(1) {
          font-size: 29rpx;
        }

        text:nth-child(2) {
          font-size: 25rpx;
          color: #8d8d8d;
          margin-top: 20.14rpx;
        }
      }
    }
  }

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 104rpx;
    background: #ffffff;
    button {
      width: 215rpx;
      height: 80rpx;
      border: 1px solid #ef231b;
      border-radius: 40rpx;
      color: #ef231b;
      font-size: 29rpx;
      margin-top: 11rpx;
      margin-left: calc(100% - 240rpx);
    }
  }

  .multipleInvoices_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1000;
    .multipleInvoices_body {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 70%;
      background: #f9f9f9;
      z-index: 1000;
      border-radius: 22rpx 22rpx 0rpx 0rpx;
      overflow: hidden;
      overflow-y: auto;
      .multipleInvoices_body_title {
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 97rpx;
        background: #fff;
        line-height: 97rpx;
        text {
          display: inline-block;
          font-size: 33.33rpx;
          font-weight: bold;
          width: 100%;
          text-align: center;
        }
        img {
          width: 20rpx;
          height: 20rpx;
          position: absolute;
          right: 50rpx;
          top: 38rpx;
        }
      }
      .multipleInvoices_body_item {
        width: 100%;
        height: 153rpx;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 20.83rpx 0;
        .invoiceNo {
          font-size: 29rpx;
          line-height: 1;
          margin-left: 27.78rpx;
        }
        .other {
          font-size: 25rpx;
          color: #8d8d8d;
          line-height: 1;
          margin-left: 27.78rpx;
          margin-top: 20.14rpx;
        }
        img {
          width: 13.61rpx;
          height: 20.83rpx;
          margin-right: 27.78rpx;
        }
      }
    }
  }
}
</style>
